import { useEffect, useRef, useState } from "react";
//css module
import styles from "./index.module.less";
import { Button, Checkbox, Flex, Form, Input } from "antd/lib";
import { LockOutlined, UserOutlined } from "@ant-design/icons";
import { getVerification, login } from "./api";
import storage from "@lgq/utils/storage";
import { Login } from "@lgq/types";
import { useNavigate, useRoutes } from "react-router-dom";

export default function LoginFC() {
  const isInitRef = useRef(false);
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  const navigator = useNavigate();


  useEffect(() => {
    if (isInitRef.current) {
      return;
    }
    isInitRef.current = true;
  },[]);

  const doLogin = async (values: Login.Params) => {
    try {
      // setLoading(true);
      // const res = await login(values);
      // setLoading(false);
      // storage.set("token", res.token);
      // storage.set("userInfo",res);
      // navigator('/dashboard');
      // console.log(res);
      // console.log(res.token);
      getVerification();
    } catch (error) {
      setLoading(false);
      console.log(error);
    }
    
  };

  return (
    <div className={styles.login}>
      <div className={styles.title}>图书管理系统</div>
      <div className={styles.loginWrapper}>
        <Form
          form={form}
          name="login"
          initialValues={{ remember: true }}
          style={{ width: 360 }}
          onFinish={doLogin}
        >
          <Form.Item
            name="userName"
            rules={[{ required: true, message: "请输入你的用户名" }]}
          >
            <Input
              allowClear
              size="large"
              maxLength={11}
              prefix={<UserOutlined />}
              placeholder="Username"
            />
          </Form.Item>
          <Form.Item
            name="userPwd"
            rules={[{ required: true, message: "请输入你的密码" }]}
          >
            <Input.Password
              size="large"
              maxLength={6}
              prefix={<LockOutlined />}
              type="password"
              placeholder="Password"
            />
          </Form.Item>
          <Form.Item>
            <Flex justify="space-between" align="center">
              <Form.Item name="remember" valuePropName="checked" noStyle>
                <Checkbox>记住密码</Checkbox>
              </Form.Item>
              <a href="">忘记密码</a>
            </Flex>
          </Form.Item>

          <Form.Item>
            <Button size="large" block type="primary" htmlType="submit" loading={loading} >
              登录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  );
}
